<template>
    <div>
        <div class="m-alert" style="align-items: center;">
            <span class="el-icon-info"></span>
            <div>
                <div>将给选择的{{ clientNum }}个客户群批量打标签，请选择标签
                    <el-button class="el-icon-circle-plus-outline" type="text" style="padding: 0;height: 0;" @click="tagGroupVisible = true">添加标签组
                    </el-button>
                </div>
            </div>
        </div>

        <el-dialog
                width="40%"
                title="添加标签组"
                :visible.sync="tagGroupVisible"
                append-to-body>

            <CreateGroupTag ref="createGroupTag"/>

            <div slot="footer" class="dialog-footer">
                <el-button @click="tagGroupVisible = false" size="small">取 消</el-button>
                <el-button type="primary" @click="submitFormHandle" size="small">确定</el-button>
            </div>
        </el-dialog>

        <div class="interspaceH"></div>

        <el-descriptions class="margin-top" title="" :column="1" direction="vertical">
            <el-descriptions-item label="已选中标签">
                <el-tag style="margin-left: 10px" :key="index" v-for="(tag, index) in chooseTags" :disable-transitions="false" closable @close="deleteChooseTag(tag)">
                    {{ tag.tagName }}
                </el-tag>
            </el-descriptions-item>

            <el-descriptions-item v-for="(item, index) in tagGroups" :key="index" :label="item.tagsGroupName">
                <el-input class="input-new-tag" :key="index"
                          style="width: 100px"
                          v-if="item['tagVisible']"
                          v-model="item['tagValue']"
                          :ref="'saveTagInput' + index"
                          size="small"
                          @keyup.enter.native="handleInputConfirm(index)"
                          @blur="handleInputConfirm(index)"
                >
                </el-input>
                <el-button v-else class="button-new-tag" size="small" @click="showInput(index)">+ 添加</el-button>
                <el-tag style="margin-left: 10px" :key="index" v-for="(tag, index) in item.tagList" :disable-transitions="false" @click="chooseTagHandle(tag)">
                    {{ tag.tagName }}
                </el-tag>
            </el-descriptions-item>
        </el-descriptions>

    </div>
</template>

<script>
import CreateGroupTag from "@/views/customer/client/client_create_group_tag"
export default {
    name: "client_update_tags",
    components: {
        CreateGroupTag
    },
    props: {
        clientNum: {
            type: [String, Number],
            default() {
                return 0
            }
        }
    },
    data() {
        return {
            chooseTags: [],
            tagGroupVisible: false,
            tagGroups: []
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            this.$request("/api/tags/getGroupTagsByParams/1_0", {tagsGroupType: "1"}, "POST").then((data) => {
                let tagGroups = []
                data.rows.map((item) => {
                    item['tagVisible'] = false
                    item['tagValue'] = ""
                })
                this.tagGroups = [...data.rows]
            })
        },
        showInput(index) {
            this.tagGroups[index].tagVisible = true;
            this.$nextTick(_ => {
                let refName = 'saveTagInput' + index
                this.$refs[refName].$refs.input.focus();
            });
        },
        handleInputConfirm(index) {
            let inputValue = this.tagGroups[index].tagValue;
            if (inputValue) {
                let payload = {
                    tagsGroupId: this.tagGroups[index]['tagsGroupId'],
                    clientTagsName: inputValue,
                    createType: 'tag'
                }

                this.$request("/api/tags/insertGroupAndTags/1_0", payload, "POST").then((data) => {
                    this.$message.success("添加成功")
                    this.tagGroups[index].tagVisible = false;
                    this.tagGroups[index].tagValue = '';
                    this.init()
                })
                this.tagGroups[index]['tags'].push(inputValue);
            }

        },
        submitFormHandle() {
            let that = this
            let payload = this.$refs.createGroupTag.getFormData()
            payload['tagsGroupType'] = '1'
            this.$request("/api/tags/insertGroupAndTags/1_0", payload, "POST").then((data) => {
                this.$message.success("添加成功")
                that.tagGroupVisible = false
                this.$refs.createGroupTag.resetFormData()
                this.init()
            })
        },
        chooseTagHandle(data) {
            this.chooseTags.push(data)
        },
        deleteChooseTag(data) {
            this.chooseTags.splice(this.chooseTags.indexOf(data), 1);
        },
        getData() {
            return this.chooseTags
        },
        resetData() {
            this.chooseTags = []
        }
    }
}
</script>

<style scoped>
.el-icon-info {
    color: #35abff;
    margin-right: 10px;
}
</style>
